<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>滚动加载更多</title>
    <style type="text/css">
        body,
        div ul{
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            background-color: #F1F1F1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            border: 1px solid gold;
        }
        /* 第二步：开始写顶部广告、导航、网站内容的布局样式 */
        /* 顶部广告布局样式 */
        .top{
            background-color: #ccc;
            height: 70px;
            width: 100%;
            text-align: center;
            font-size: 30px;
        }
        
        /* 导航布局样式 */
        .header{
            background-color: #666;
            height: 71px;
            width: 100%;
        }
        .phpNav{
            width:960px;
            margin: 0 auto;
        }
        .phpNav li{
            float: left; 
            list-style-type: none;
            width: 200px;
            background-color: #ff6600;
            text-align: center;
            margin-left: 20px;
        }
        .phpNav li a{
            text-decoration: none;
            color: #fff;
        }
        /* 网站内容布局样式 */
        .box{
            background-color: rgb(216, 230, 200);
            height: 2000px;
            width: 100%;
            text-align: center;
            font-size: 30px;
        }

        /* 当滚动条距离顶部大于或等于顶部广告高度的时候
        就会添加这个CSS类 */
        .menu_xf{
            position: fixed;
            top:0px;
        }
        .box_top{
           margin-top: 70px;
        }



        
    </style>
</head>
<body>
    <!-- 第一步：写好顶部广告、导航、网站内容的布局代码 -->
    <div style="width: 100%;">
    <div class="top">
        顶部广告
    </div>
    <div class="header">
        <ul class="phpNav">
            <li>
                <a href="/"  title=" 首页">
                    <h2>首页</h2>
                </a>
            </li>
            <li>
                <a href="/course.html" target="_blank" title="视频教程">
                    <h2>视频教程</h2><b></b>
                </a>
            </li>
            <li>
                <a href="/map.html" title="学习路径">
                    <h2>学习路径</h2><b></b>
                </a>
            </li>
            <li>
                <a target="_blank" href="/k.html">
                    <h2>PHP培训</h2>
                </a>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class="box">
        网站内容<br/>网站内容<br/>网站内容<br/>
        网站内容<br/>网站内容<br/>网站内容<br/>
    </div>
    </div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //第三步：开始写js
    //添加滚动事件
    $(window).scroll(function () {
        //获取窗口滚动条距离顶部的距离
        var scrollTop = $(window).scrollTop();
        // 当滚动条距离顶部高度大于等于顶部广告高度的时候
        // 就添加下面两个样式类，小于时就移除
        if (scrollTop>=70) {
            console.log('悬浮');
            $('.header').addClass('menu_xf');
            $('.box').addClass('box_top');
        }
        else
        {
            console.log('取消悬浮');
            $('.header').removeClass('menu_xf');
            $('.box').removeClass('box_top');
        }
    })
</script>

</html>
